{extend name="public/common"}
{block name="style"}
<title>点对点教育VIP学员_课后评价</title>
<link rel="stylesheet" href="__HOME__/css/evaluate/sign.css">
<style>
    body {
        overflow-x: hidden;
        background-color: #fff;
    }
    @media screen  and (min-width: 1080px){
        .tip {
            height: 6.6vw;
            text-align: center;
            line-height: 6.6vw;
            color: #c1c1c1;
            font-size: 0.34rem;
        }
    }
    .img{
        width: 4vw;
        height: 4vw;
        margin: 0 0.3vw;
    }
</style>
{/block}
{block name="body"}
<div class="scroll" style="position:absolute; overflow:scroll; -webkit-overflow-scrolling: touch; top:0; left:0; bottom:0; right:0">
    <div class="notices">
        <div class="lists">
            {empty name="list"}
            <div class="default"><img src="/DDDeducation/public/home/images/common/nomessage.png"></div>
            {else/}
            {volist name="list" id="vo"}
            <div class="list clear">
                <div class="fl">
                    <img src="{$vo.headimgurl}" alt="用户头像">
                </div>
                <div class="fr">
                    <div class="name limit">{$vo.name}</div>
                    <div class="content">{$vo.content}</div>
                    <div class="imgs">
                        {volist name = "$vo.img" id="pic"}
                        <div class="img">
                            <img src="{$pic}" alt="评论图">
                        </div>
                        {/volist}
                    </div>
                    <div class="note clear">
                        <span style="width:80%">{$vo.school}/{$vo.time}</span>
                        {switch name="$vo.score"}
                        {case value="1"}<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">{/case}
                        {case value="2"}<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">{/case}
                        {case value="3"}<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">{/case}
                        {case value="4"}<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">{/case}
                        {case value="5"}<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">{/case}
                        {/switch}
                    </div>
                </div>
            </div>
            {/volist}
            {/empty}
        </div>
    </div>
    <div class="tip"></div>
    <div class="loading hidden">
        <div class="typing_loader"></div>
    </div>
</div>
{/block}
{block name="script"}
<script src="__HOME__/js/reset.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    $('title').text('点对点教育VIP学员_课后评价');
    $(function(){
        var len = $('.lists .list').length;
        if(len >= 15){
            $('.tip' ).text('上拉加载更多');
            document.getElementsByClassName("scroll")[0].addEventListener('scroll',loadScroll);

        }
    });
    var scrollNow = true;
    function loadScroll(){
        var len = $('.lists .list').length;
        var tip = $(".tip");
        var loading = $('.loading');
        var el = document.getElementsByClassName("scroll")[0];
        var id ="{$id}";
        if(el.scrollTop + el.offsetHeight +2 >= el.scrollHeight && scrollNow){
            scrollNow = false;//请求执行中
            $.ajax({
                type: 'post',
                url: "{:Url('Evaluate/more')}",
                data: {
                    length:len,
                    id:id
                },
                beforeSend: function(XMLHttpRequest){
                    tip.hide();
                    loading.toggleClass('hidden');
                },
                success:function(data){
                    loading.toggleClass('hidden');
                    tip.show();
                    if(data.code == 1){
                        addLists(data);
                        var dataLen =data.data.length;
                        if(data.data.length == 15){
                            tip.text('上拉加载更多');
                        }else{
                            tip.text('没有更多数据了');
                            document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                        }
                    }else{
                        tip.text('没有更多数据了');
                        document.getElementsByClassName("scroll")[0].removeEventListener('scroll',loadScroll);
                    }
                    scrollNow = true;//请求结束
                }
            })
        }
    }

    function addLists(data){
        var html = '';
        var lists = data.data;
        var len = lists.length;
        for(var i = 0; i< len;i++){
            var list = lists[i];
            html +=
                    '<div class="list clear">'+
                    '<div class="fl">'+
                    '<img src="'+list.headimgurl+'" alt="用户头像">'+
                    '</div>'+
                    '<div class="fr">'+
                    '<div class="name limit">'+list.name+'</div>'+
                    '<div class="content">'+list.content+'</div>'+
                    '<div class="imgs">';
            var imglen = list.img.length;
            if (imglen > 0){
                var tem = list.img;
                for(var j = 0 ;j<imglen ;j++){
                    if(tem[j]){
                        html+=
                                '<div class="img">'+
                                '<img src='+tem[j]+' alt="评论图" data-original="">'+
                                '</div>';
                    }
                }
            }
            html +=
                    '</div>'+
                    '<div class="note clear">'+
                    '<span style="width:80%">'+list.school+'/'+list.time+'</span>'
            if (list.score == 1){
                html+='<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">';
            }else if(list.score == 2){
                html+='<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">';
            }else if (list.score == 3){
                html+='<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">';
            }else if (list.score == 4){
                html+='<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">';
            }else if (list.score == 5){
                html+='<img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png"><img class="img" src="/DDDeducation/public/home/images/evaluate/goods.png">';
            }
                        html+='</div>'+
                    '</div>'+
                    '</div>';
        }
        $(".lists" ).append(html);
        layout();
        $(".img img").on('click',function(event) {
            var imgArray = [];
            var curImageSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
            var oParent = $(this).parent();
            if (curImageSrc && !oParent.attr('href')) {
                oParent.parent().find("img").each(function(index, el) {
                    var itemSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
                    imgArray.push(itemSrc);
                });
                wx.previewImage({
                    current: curImageSrc,
                    urls: imgArray
                });
            }
        });
    }


    var layout = function(){
        $('.list').each(function(){
            var this_ = $(this);
            var n_img = this_.find('.imgs .img' ).length;
            var n_li = this_.find('.comments li' ).length;
            console.log(n_li)
            if(n_img == 4){
                this_.find('.imgs .img' ).eq(1).after('')
            }
            if(n_li == 0){
                this_.find('.comments').addClass('hide');
            }
        })
    };

    //图片排版、评论框
    layout();

    window.onpageshow = function (e) {
        if (e.persisted) {
            window.location.reload(true)
        }
    }
    $(".img img").on('click',function(event) {
        var imgArray = [];
        var curImageSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
        var oParent = $(this).parent();
        if (curImageSrc && !oParent.attr('href')) {
            oParent.parent().find("img").each(function(index, el) {
                var itemSrc = window.location.protocol+'//'+window.location.host+$(this).attr('src');
                imgArray.push(itemSrc);
            });
            wx.previewImage({
                current: curImageSrc,
                urls: imgArray
            });
        }
    });
</script>
{/block}